<%@ page language="java" errorPage="/error.jsp" pageEncoding="UTF-8" contentType="text/html;charset=utf-8" %>
<%@ include file="/common/taglibs.jsp" %>
<head>
    <title>选择支付方式</title>
    <meta charset="utf-8" name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <%@ include file="/common/styles.jsp" %>
    <link rel="stylesheet" type="text/css" href="${dll}/frozenui/dist/css/frozen.css">

</head>
<style>
    .ui-avatar, .ui-avatar-lg, .ui-avatar-s, .ui-avatar-one, .ui-avatar-tiled{
        background-image: none;
    }
</style>
<body>
<s:action name="additional-order!view" executeResult="false" namespace="/h5" var="view"/>
<section>
    <div class="pay_time_tip">
        <span>请在尽快完成支付</span>
    </div>
    <ul class="ui-list ui-border-tb">
        <li class="ui-border-t">
            <div class="ui-list-info">
                <h4 class="ui-nowrap">
                    <span class="fl">补单说明</span>
                    <span class="fr">${view.additionalOrder.name}</span>
                </h4>
            </div>
        </li>
        <li class="ui-border-t">
            <div class="ui-list-info">
                <h4 class="ui-nowrap">
                    <span class="fl">补单金额</span>
                    <span class="fr green_color">
              <span>￥</span>
              <span class="all_money">${util:priceFormat(view.additionalOrder.price)}</span>
            </span>
                </h4>
            </div>
        </li>
    </ul>


    <ul class="ui-list ui-border-tb mt10">
        <li class="ui-border-t">
            <div class="ui-list-info">
                <h4 class="ui-nowrap">
                    <span class="fl">选择支付方式</span>
                </h4>
            </div>
        </li>

        <li class="ui-border-t pos_imgs">
            <div class="ui-avatar-s">
                <span style="background-image:url(${dll}/api/images/zfb.png)"></span>
            </div>
            <div class="ui-list-info  postion_rel">
                <h4 class="ui-nowrap">支付宝支付</h4>
                <p class="ui-nowrap">推荐有支付宝账号的用户使用</p>
                <img class="img_absoulte" src="${dll}/api/images/hide_selected.png" style="position: absolute;right: 15px;top:50%;margin-top: -10px;">
            </div>
        </li>
        <li class="ui-border-t pos_imgs">
            <div class="ui-avatar-s">
                <span style="background-image:url(${dll}/api/images/wx.png)"></span>
            </div>
            <div class="ui-list-info postion_rel">
                <h4 class="ui-nowrap">微信支付</h4>
                <p class="ui-nowrap">推荐安装微信5.0及以上版本</p>
                <img class="img_absoulte" src="${dll}/api/images/unsel.png" style="position: absolute;right: 15px;top:50%;margin-top: -10px;">
            </div>
        </li>
    </ul>
    <div class="pay_btn pay">
        <button class="btn-lg btn-pay">确认支付</button>
    </div>
</section>
</body>
<%@ include file="/common/scripts.jsp" %>
<script>
    var m = '支付宝支付';
    var _paymentType = '0';
    var all_money = $(".all_money").text();
    $(".pos_imgs").click(function () {
        var a_src = $(this).children('.postion_rel').find("img");
        var b_src = $(this).siblings().children('.postion_rel').find("img");
        if (a_src.attr('src') == '${dll}/api/images/unsel.png') {
            a_src.attr('src', '${dll}/api/images/hide_selected.png');
            b_src.attr('src', '${dll}/api/images/unsel.png');
            m = $(this).children('.postion_rel').find("h4").text();
        }
    });

    $(".pay").click(function () {
//        alert('支付金额：' + all_money + '您选择的支付方式为：' + ' ' + m);
        var _id = '${view.additionalOrder.id}';
        var _myLat = '${param.myLat}';
        var _myLng = '${param.myLng}';

        if (_id == null || _id == '') {
            layer.open({
                content: '请选择正确的订单',
                skin: 'msg',
                time: 2 //2秒后自动关闭
            });
        } else {
            if (m == '支付宝支付') {
                _paymentType = 0;
            } else if (m == '微信支付') {
                _paymentType = 1;
            }

            layer.open({type: 2, time: 5});

            var _content = "${view.additionalOrder.user.username}用户商品购买支付";
            var _amount = accMul((${view.additionalOrder.price}), 100);

            $.ajax({
                url: "${ctx}/h5/additional-order!pay.action",
                type: "post",
                data: {
                    "additionalOrder.payment": _paymentType,
                    id: _id
                },
                dataType: "json",
                success: function (result) {
                    if (result.status != 1) {
                        layer.open({
                            content: result.msg,
                            time: 2 //2秒后自动关闭
                        });
                    }
                    if (result.status == 1) {
                        var url = "/ping-pay!pay.action?order_type=additionalOrder"
                        if (_paymentType == 0) {
                            url += "&channel=alipay";
                        }
                        if (_paymentType == 1) {
                            url += "&channel=wx";
                        }
                        url += "&order_no=" + '${view.additionalOrder.no}'
                                + "&amount=" + _amount + "&subject=" + _content + "&body=" + _content + "&out_id=" + '${view.additionalOrder.id}';
                        console.log(url);
                        app_pay(url);
                    }
                }
            });
        }


    });


    function app_pay(url) {
        if (typeof PINGPP_IOS_SDK !== 'undefined') {
            PINGPP_IOS_SDK.callPay(url);
        } else if (typeof PINGPP_ANDROID_SDK !== 'undefined') {
            PINGPP_ANDROID_SDK.callPay(url);
        }
    }

    function accMul(arg1, arg2) {
        var m = 0, s1 = arg1.toString(), s2 = arg2.toString();
        try {
            m += s1.split(".")[1].length;
        }
        catch (e) {
            1
        }
        try {
            m += s2.split(".")[1].length;
        }
        catch (e) {
        }
        return Number(s1.replace(".", "")) * Number(s2.replace(".", "")) / Math.pow(10, m);
    }
</script>